<template>
  <div id="welcome">
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="15">
      <!-- 左边部分 -->
      <el-col :span="14">
        <!-- 用户信息表格 -->
        <el-card class="box-card" style="height: 230px">
          <div slot="header" class="clearfix" :style="{color:color}">
            {{texts}}
          </div>
          <el-tooltip class="item" effect="dark" content="换头像功能还未实现" placement="top-start">
            <el-avatar
              v-loading="loading"
              shape="square"
              :size="80"
              :src="userInfo.avatar"
              style="float:left;margin: 10px 10px 10px 10px"
              :key="1"
            ></el-avatar>
          </el-tooltip>
          <div class="right" style="float:right;width:520px;">
            <el-table :data="tableInfo" border height="100" v-loading="loading">
              <el-table-column prop="username" label="用户账号"></el-table-column>
              <el-table-column prop="phone" label="联系电话"></el-table-column>
              <el-table-column prop="deptName" label="所属部门"></el-table-column>
              <el-table-column fixed="right" prop="roleName" label="用户角色" width="150"></el-table-column>
            </el-table>
          </div>
        </el-card>
        <!-- 功能列表 -->
<!--        <el-row style="margin-top:10px;">-->
<!--          <el-card style="height:125px;">-->
<!--            <el-col :span="6">-->
<!--              <div class="grid-content bg-purple">-->
<!--                <router-link to="/business/product/list">-->
<!--                  <img-->
<!--                    src="~@/assets/1.svg"-->
<!--                    alt-->
<!--                    width="60.8px;"-->
<!--                    style="margin:0px auto; cursor: pointer;margin-left:20px;"-->
<!--                  />-->
<!--                </router-link>-->
<!--                <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资资料</div>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <div>-->
<!--                <router-link to="/business/product/stocks">-->
<!--                  <img-->
<!--                    src="~@/assets/2.svg"-->
<!--                    alt-->
<!--                    width="60.8px;"-->
<!--                    style="cursor: pointer;margin-left:20px;"-->
<!--                  />-->
<!--                </router-link>-->
<!--                <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资库存</div>-->
<!--              </div>-->
<!--            </el-col>-->

<!--            <el-col :span="6">-->
<!--              <div class="grid-content bg-purple-light">-->
<!--                <router-link to="/business/product/add-stocks">-->
<!--                  <img-->
<!--                    src="~@/assets/3.svg"-->
<!--                    alt-->
<!--                    width="60.8px;"-->
<!--                    style="cursor: pointer;margin-left:20px;"-->
<!--                  />-->
<!--                </router-link>-->

<!--                <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资入库</div>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <div class="grid-content bg-purple"></div>-->
<!--              <router-link to="/business/product/publish">-->
<!--                <img-->
<!--                  src="~@/assets/4.svg"-->
<!--                  alt-->
<!--                  width="60.8px;"-->
<!--                  style="cursor: pointer;margin-left:20px;"-->
<!--                />-->
<!--              </router-link>-->
<!--              <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资发放</div>-->
<!--            </el-col>-->
<!--          </el-card>-->
<!--        </el-row>-->

      </el-col>
      <!-- 右边部分 -->
<!--      <el-col :span="10">-->
<!--        <div class="grid-content bg-purple">-->
<!--          <el-card style="min-height:650px;">-->

<!--            <el-divider></el-divider>-->

<!--          </el-card>-->
<!--          &lt;!&ndash; <el-calendar :v-model="new Date()"></el-calendar> &ndash;&gt;-->
<!--        </div>-->
<!--      </el-col>-->
    </el-row>

    <!-- <el-card class="box-card">
           <el-calendar v-model="value"></el-calendar>
    </el-card>-->
  </div>
</template>
<script>
import { getUserInfo } from '../../api/login'

export default {
  name: 'Welcome',
  data () {
    return {
      color:'',
      texts:'',
      loading:true,
      userInfo: {},
      tableInfo: [],
    }
  },
  methods: {
    async getUser () {
      const res = await getUserInfo()
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('获取用户信息失败:' + res.message)
      } else {
        this.userInfo = res.data.Info
        this.tableInfo.push({
          username: this.userInfo.username,
          phone: this.userInfo.phone,
          deptName: this.userInfo.deptName,
          roleName: this.userInfo.roleName
        });
      }
    },
    getText(){
      const nowDate = new Date();
      console.log(nowDate.getHours())
      if(nowDate.getHours()<6){
        this.texts='夜深了，早点休息吧！'
        this.color='#000000'
      }
      else if(nowDate.getHours()<10){
        this.texts='前事不忘，后事之师，早上好！'
        this.color='#f1b34e'
      }
      else if(nowDate.getHours()<12){
        this.texts='差以毫厘，谬以千里，上午好！'
        this.color='#ff9900'
      }
      else if(nowDate.getHours()<15){
        this.texts='中午啦，稍微打个盹儿吧！'
        this.color='#ff4141'
      }
      else if(nowDate.getHours()<18){
        this.texts='下午好，打起精神，很快就下班啦！'
        this.color='#ffd143'
      }
      else{
        this.texts='天黑咯，赶紧完成工作吧！'
        this.color='#216596'
      }
    }
  },

  created () {
    this.getUser()
    this.getText()
    // this.getUser()
    setTimeout(() => {
      this.loading = false
    }, 500)
  },
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.clearfix{
  font-size: 30px;
  font-weight: 10;
  text-shadow: 5px 2px 8px #41515d;
}


</style>
